<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar title="购物车"/>
        </div>
        <!--显示购物车中的商品-->
        <div class="cart-list">
            <div class="pang-row">
                <div class="pang-img"><img width="100%"/></div>
                <div class="pang-text">
                    <div class="pang-goods-name"></div>
                    <div class="pang-control">
                        <van-stepper/>
                    </div>
                </div>
            </div>
        </div>
        <!--清空购物车-->
        <div class="card-title">
            <van-button size="small" type="danger" @click="clearCart" >清空购物车</van-button>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //购物车内的商品信息
                cartInfo:[],
                //购物车是否为空，不为空显示true,为空显示false
                isEmpty:false,
            }
        },
        created(){
            this.getCartInfo();
        },
        methods:{
            //获取购物车的商品
            getCartInfo(){
                //判断localStorage里是否有购物车数据
                if(localStorage.cartInfo){
                    //如果有数据，我们去除并赋值给cartInfo
                    this.cartInfo = JSON.parse(localStorage.cartInfo)
                }
                console.log('this.cartInfo:'+JSON.stringify(this.cartInfo))
                this.isEmpty = this.cartInfo.length>0? true:false
            },

            //清空购物车商品
            clearCart(){
                localStorage.removeItem('cartInfo')
                this.cartInfo=[]
            }
        }
    }
</script>
<style scoped>
    .cart-list{
        background-color: #fff;
    }
    .card-title{
        height: 2rem;
        line-height: 2rem;
        background-color: #ffffff;
        border-bottom: 1px #e4e7ed;
        padding: 5px;
        text-align:right;
    }
    .pang-row{
        display: flex;
        flex-direction: row;
        flex-wrap:nowrap;
        padding:0.5rem;
        font-size:0.85rem;
        border-bottom:1px solid #E4E7ED;
    }
</style>


